<template>
	<div class="w-full overflow-y-auto" :style="{ height: height + 'px' }">
		<n-tree
			block-line
			checkable
			cascade
			:data="data"
			:checked-keys="checkKeys"
			:default-expanded-keys="defaultExpandedKeys"
			:render-switcher-icon="renderSwitcherIcon"
			selectable
			@update:checked-keys="updateCheckedKeys" />
	</div>
</template>
<script setup lang="ts">
	import { defineComponent, ref, h } from 'vue';
	import { repeat } from 'seemly';
	import { NIcon, TreeOption } from 'naive-ui';
	import { ChevronForward } from '@vicons/ionicons5';
	import { propTypes } from '@/utils/propTypes';
	import { getPermissionTree } from '@/api/system';
	const props = defineProps({
		height: propTypes.number.def(300),
		defaultSelect: propTypes.array.def([]),
	});
	const checkKeys = ref([]);
	const data = ref([]);
	const defaultExpandedKeys = ref([]);
	watch(
		() => props.defaultSelect,
		(n, o) => {
			checkKeys.value = toRaw(n);
		}
	);
	getPermissionTree().then((res) => {
		data.value = res;
		defaultExpandedKeys.value = res.map((item) => item.key);
	});

	const renderSwitcherIcon = () => {
		return h(NIcon, null, { default: () => h(ChevronForward) });
	};
	const updateCheckedKeys = (v: string[]) => {
		checkKeys.value = v;
		console.log('updateCheckedKeys', v);
	};
	const getCheckKey = () => {
		return checkKeys;
	};
	defineExpose({
		getCheckKey,
	});
</script>
<style lang="scss"></style>
